<script setup lang="ts">
import { ref, reactive, onMounted, inject, watch, Ref } from 'vue'

import emitter from '@/utils/eventBus'

const showGasDailg = inject('showGasDialog') as (tyep: number, deviceCode: string, yard:number, code:string) => {}

// props
const props = defineProps({
  deviceCode: {
    type: String,
    default: null
  },
  codeArr: {
    type: String,
    default: null
  },
  posi: {
    type: Number,
    default: 0
  },
  yard: {
    type: Number,
    default: 1
  }
})

// mqtt信息接口
interface mqttInter {
  Name: string,
  States: number,
  Time: string,
  Values: number[],
}

// 定义变量
const CONum = ref(0)
const CH4Num = ref(0)
const SmokeNum = ref(0)
const DustNum = ref(0)
const SO2Num = ref(0)

const COCode = ref('——')
const CH4Code = ref('——')
const SmokeCode = ref('——')
const DustCode = ref('——')
const SO2Code = ref('——')

const position = ref('')
const alarmData: alarmDataIntef = inject('alarmData') as alarmDataIntef

const COAlarm = ref('')
const CH4Alarm = ref('')
const SmokeAlarm = ref('')
const DustNumAlarm = ref('')
const SO2NumAlarm = ref('')
// 监听器
watch(CONum, (nv, ov) => {
  String(CONum.value) < alarmData.CO2 ? COAlarm.value = '' : (String(CONum.value) < alarmData.CO) ? COAlarm.value = 'gasSecondary' : COAlarm.value = 'gasFirstary'
  // console.log('监听CONum数据变化---->', nv, ov, COAlarm)
})
watch(CH4Num, (nv, ov) => {
  String(CH4Num.value) < alarmData.CH42 ? CH4Alarm.value = '' : (String(CH4Num.value) < alarmData.CH4) ? CH4Alarm.value = 'gasSecondary' : CH4Alarm.value = 'gasFirstary'
  // console.log('监听CH4Num数据变化---->', nv, ov, CH4Alarm)
})
watch(SmokeNum, (nv, ov) => {
  String(SmokeNum.value) < alarmData.smoke2 ? SmokeAlarm.value = '' : (String(SmokeNum.value) < alarmData.smoke) ? SmokeAlarm.value = 'gasSecondary' : SmokeAlarm.value = 'gasFirstary'
  // console.log('监听SmokeNum数据变化---->', nv, ov, SmokeAlarm)
})
watch(DustNum, (nv, ov) => {
  String(DustNum.value) < alarmData.dust2 ? DustNumAlarm.value = '' : (String(DustNum.value) < alarmData.dust) ? DustNumAlarm.value = 'gasSecondary' : DustNumAlarm.value = 'gasFirstary'
  // console.log('监听DustNum数据变化---->', nv, ov, DustNumAlarm)
})
watch(SO2Num, (nv, ov) => {
  String(SO2Num.value) < alarmData.SO22 ? SO2NumAlarm.value = '' : (String(SO2Num.value) < alarmData.SO2) ? SO2NumAlarm.value = 'gasSecondary' : SO2NumAlarm.value = 'gasFirstary'
  // console.log('监听SO2Num数据变化---->', nv, ov, SO2NumAlarm)
})

// 定义方法
onMounted(() => {
  emitter.on('updateData', showInfo)
})

const showInfo = (data: any) => {
  
  let showData: mqttInter[] = []
  data.forEach((item: mqttInter) => {
    // console.log('includes---->', item.Name.includes(props.deviceCode))
    // console.log('item.Values------->', item.Name.includes(props.deviceCode), item.Name, props.deviceCode, item )
    if (item.Name.includes(props.deviceCode)) {
      // console.log('item.Name------->', item.Name, props.deviceCode, item )
      showData.push(item)
      switch (item.Name.split('_')[3]) {
      case 'CH4':
        if (item.States === 0) {
          CH4Num.value = item.Values[0] ? item.Values[0] : 0
          CH4Code.value = item.Name ? item.Name : ''
        }
        break
      case 'SO2':
        SO2Num.value = item.Values[0] ? item.Values[0] : 0
        SO2Code.value = item.Name ? item.Name : ''
        break
      case 'CO':
        CONum.value = item.Values[0] ? item.Values[0] : 0
        COCode.value = item.Name ? item.Name : ''
        break
      case 'FOG':
        DustNum.value = item.Values[0] ? item.Values[0] : 0
        DustCode.value = item.Name ? item.Name : ''
        break
      case 'SMOKE':
        SmokeNum.value = item.Values[0] ? item.Values[0] : 0
        SmokeCode.value = item.Name ? item.Name : ''
        break
      }
    }
  })
  
}

// 引入依赖
const showIcon: any = inject('showIcon')
interface alarmDataIntef {
  CO: string,
  O2: string,
  SO2: string,
  CH4: string,
  smoke: string,
  dust: string,
  infrared: string,
  CO2: string,
  O22: string,
  SO22: string,
  CH42: string,
  smoke2: string,
  dust2: string,
  infrared2: string
}

</script>
<template>
  <el-popover
    placement="top-start"
    trigger="hover"
    width="350px"
  >
    <template #reference>
      <div
        class="point-item-main-box"
        @click.stop="showGasDailg(4, props.deviceCode, props.yard, `${yard}_1_${props.deviceCode}_CH4_0,${yard}_1_${props.deviceCode}_CO_0,${yard}_1_${props.deviceCode}_SMOKE_0,${yard}_1_${props.deviceCode}_SO2_0,${yard}_1_${props.deviceCode}_FOG_0`)"
      >
        <div
          :id="((COAlarm === 'gasFirstary') || (CH4Alarm === 'gasFirstary') || (SmokeAlarm === 'gasFirstary') || (DustNumAlarm === 'gasFirstary') || (SO2NumAlarm === 'gasFirstary')) ? 'gasFirstary' : (((COAlarm === 'gasSecondary') || (CH4Alarm === 'gasSecondary') || (SmokeAlarm === 'gasSecondary') || (DustNumAlarm === 'gasSecondary') || (SO2NumAlarm === 'gasSecondary')) ? 'gasSecondary' : '') "
        />
      </div>
    </template>
    <template #default>
      <div class="pop-box">
        <div
          v-show="showIcon.CO"
          class="info-item"
        >
          <div
            :id="(String(CH4Num) < alarmData.CH4) ? '' : ((String(CH4Num) < alarmData.CH42) ? 'secondAlarm' : 'firstAlarm')"
            class="ch4-num info-num"
          >
            {{ CH4Num }}
          </div>
          <div class="info-name">
            甲烷
          </div>
          <div class="id-box">
            ID:<span>{{ CH4Code }}</span>
          </div>
        </div>
        <div
          v-show="showIcon.CO"
          class="info-item"
        >
          <div
            :id="(String(CONum) < alarmData.CO) ? '' : ((String(CONum) < alarmData.CO2) ? 'secondAlarm' : 'firstAlarm')"
            class="ch4-num info-num"
          >
            {{ CONum }}
          </div>
          <div class="info-name">
            一氧化碳
          </div>
          <div class="id-box">
            ID:<span>{{ COCode }}</span>
          </div>
        </div>
        <div
          v-show="showIcon.smoke"
          class="info-item "
        >
          <div
            :id="(String(SmokeNum) < alarmData.smoke) ? '' : ((String(SmokeNum) < alarmData.smoke2) ? 'secondAlarm' : 'firstAlarm')"
            class="smoke-num info-num"
          >
            {{ SmokeNum }}
          </div>
          <div class="info-name">
            烟感
          </div>
          <div class="id-box">
            ID:<span>{{ SmokeCode }}</span>
          </div>
        </div>
        <div
          v-show="showIcon.dust"
          class="info-item"
        >
          <div
            :id="(String(SO2Num) < alarmData.SO2) ? '' : ((String(SO2Num) < alarmData.SO22) ? 'secondAlarm' : 'firstAlarm')"
            class="dust-num info-num "
          >
            {{ SO2Num }}
          </div>
          <div class="info-name">
            二氧化硫
          </div>
          <div class="id-box">
            ID:<span>{{ SO2Code }}</span>
          </div>
        </div>
        <div
          v-show="showIcon.dust"
          class="info-item"
        >
          <div
            :id="(String(DustNum) < alarmData.dust) ? '' : ((String(DustNum) < alarmData.dust2) ? 'secondAlarm' : 'firstAlarm')"
            class="dust-num info-num "
          >
            {{ DustNum }}
          </div>
          <div class="info-name">
            粉尘
          </div>
          <div class="id-box">
            ID:<span>{{ DustCode }}</span>
          </div>
        </div>
      </div>
    </template>
  </el-popover>
</template>

<style lang="scss" scoped>
.point-item-main-box {
  display: flex;
  align-items: center;
  justify-content: space-around;
  width: 32px;
  height: 32px;
  background: #f8fafd;
  border-radius: 32px;
  box-shadow: 0 4px 8px 0 rgb(166 184 208 / 40%);
  opacity: 1;
  >div {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    background: linear-gradient(180deg, #54aafe 0%, #4482ed 100%);
    border-radius: 20px;
    box-shadow: 0 2px 4px 0 #bbd2ff;
    opacity: 1;
  }
}
.four-item-main-box:hover {
  cursor: pointer;
}
.pop-box {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  width: 340px !important;

  /* border: 1px solid red; */
  .info-item {
    display: flex;
    align-content: center;
    justify-content: space-between;
    width: 340px !important;

    /* border: 1px solid red; */
    >div {
      display: flex;
      align-content: center;
      justify-content: flex-start;

      /* border: 1px solid blue; */
    }
    .info-num {
      justify-content: center;
      width: 70px !important;
      color: #fff;
      font-family: Ding, sans-serif;
    }
    .info-name {
      width: 70px !important;
      padding-left: 10px;
    }
    .id-box {
      width: 170px;
      text-align: center;
      >span {
        width: calc(100% - 20px);
      }
    }
  }
}
</style>

<style lang="scss">
.el-popper {
  padding: 2px !important;
  background: rgb(234 244 251 / 80%) !important;
  border: 1px solid #fff !important;
  border-radius: 2px !important;
  box-shadow: 0 4px 8px 0 rgb(166 184 208 / 40%) !important;
  .pop-box {
    /* height: 160px; */
    .info-item {
      display: flex;
      width: 145px;
      height: 32px;
      margin-top: 5px;
      background: #f8fafd;
      border-radius: 4px;
      opacity: 1;
      >div {
        line-height: 32px;
      }
      .info-num {
        width: 70px;
        height: 32px;
        text-align: center;
        border-radius: 4px 0 0 4px;
        opacity: 1;
      }
      .ch4-num {
        /* background: linear-gradient(133deg, #ff532e 0%, #ff66a4 100%); */

        background: linear-gradient(133deg, #2ff4a1 0%, #26c58b 100%);
      }
      .co-num {
        background: linear-gradient(133deg, #2ff4a1 0%, #26c58b 100%);
      }
      .smoke-num {
        background: linear-gradient(133deg, #2ff4a1 0%, #26c58b 100%);
      }
      .dust-num {
        background: linear-gradient(133deg, #2ff4a1 0%, #26c58b 100%);
      }
      #secondAlarm {
        background: linear-gradient(180deg, #FFC063 0%, #EC770C 100%);
      }
      #firstAlarm {
        background: linear-gradient(133deg, #ff532e 0%, #ff66a4 100%);
      }
      .info-name {
        width: 65px;
        height: 32px;
        margin-left: 10px;
        color: #4e5969;
        font-weight: 600;
        font-size: 14px;
        font-family: PingFang, sans-serif;
        background-clip: text;
      }
    }
  }
}
</style>